<template>
  <div class="container" ref="container">
    <div class="container-inner">
      <van-form ref="form" label-width="110px" scroll-to-error @submit="onSubmit">
        <!-- :show-error-message="false" -->
        <div class="card base">
          <div class="card-bar">
            <div class="card-bar-title">意见反馈</div>
          </div>
          <div class="card-container">
            <van-field name="radio" label="类别">
              <template #input>
                <van-radio-group class="radio_group" v-model="formData.classType" direction="horizontal">
                  <van-radio name="使用咨询">使用<br />咨询</van-radio>
                  <van-radio name="问题反馈">问题<br />反馈</van-radio>
                  <van-radio name="个人建议">个人<br />建议</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field v-model="formData.title" clearable :rules="[{ required: true, }]" name="title" label="标题"
              input-align="right" placeholder="请输入标题">
            </van-field>
            <van-field v-model="formData.content" clearable :rules="[{ required: true, }]" name="content" label="意见内容"
              input-align="right" placeholder="请输入意见内容" type="textarea">
            </van-field>
            <div class="colla_image">
              <div class="img" v-for="(item, index) in this.formData.imgUrl" :key="index">
                <van-icon name="cross" class="img_icon" @click="deld(index)" />
                <img class="img_pg" :src="item" alt="图片" />
              </div>
              <van-uploader v-if="this.formData.imgUrl.length <= 5" class="img_up" :max-count="5"
                :after-read="afterRead" multiple />
            </div>
          </div>
        </div>
      </van-form>
    </div>
    <div class="bottom-bar">
      <van-button class="bottom-bar-btn" block size="large" color="#D58913" type="info" text="确认提交"
        @click="beforeSubmitAction" />
    </div>
  </div>
</template>

<script>
import { addInformation, addimage, getFileSign } from '@/api/school'
export default {
  data() {
    return {
      images: [],
      url: {
        information: require('@/assets/images/school/information.jpg'),
      },
      formData: {
        classType: "使用咨询",
        title: "",
        content: "",
        imgUrl: []
      },
      value: "",
    }
  },
  mounted() {
    this.$refs.container.style.backgroundImage = "url(" + this.url.information + ") "
  },
  methods: {
    deld(i) {
      this.formData.imgUrl.splice(i, 1);
    },
    afterRead(file) {
      getFileSign().then(res => {
        addimage({
          timestamp: new Date().getTime(),
          file: file.content.split(",")[1],
          fileName: file.file.name,
          filePath: 'house/Wl',
          sign: res.data.data.sign
        }).then(res => {
          if (res.data.errcode === 0) {
            this.formData.imgUrl.push(res.data.data);
            this.$toast('上传成功')
          } else {
            this.$toast('上传失败')
          }
        })
      })
    },
    onFailed(errorInfo) {
      this.failNotice(errorInfo.errors[0].message)
    },
    beforeSubmitAction() {
      this.$refs.form.submit()
    },
    async onSubmit() {
      const { key, card_no, name, mobile } = this.$route.query
      this.$dialog
        .confirm({
          title: '是否确认提交',
          message: '',
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          confirmButtonColor: '#D58913',
          beforeClose: async (action, done) => {
            if (action === 'confirm') {
              if (this.formData.classType === "其他") {
                this.formData.classType = this.value
              };
              const confirmData = await addInformation({
                phone: mobile,
                createBy: name,
                ...this.formData,
                type: "1",
                imgUrl: this.formData.imgUrl.join(","),
              })
              if (confirmData.data.errcode == 0) {
                this.$toast('操作成功')
                setTimeout(() => {
                  this.$router.push({
                    path: '/school/consultationand',
                    query: {
                      ...this.$route.query
                    },
                  })
                }, 500)
                done()
              } else {
                this.$toast(confirmData.data.errmsg)
                done()
              }
            } else {
              done()
            }
          },
        })
        .catch(() => { })
    },
  },
}
</script>

<style lang="less" scoped>
.card-container {
  /deep/ .van-cell__title {
    width: 100px !important;
  }
}

.colla_image {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .img {
    width: 80px;
    height: 80px;
    position: relative;
    margin: 5%;

    .img_icon {
      position: absolute;
      right: -8px;
      color: #ee0a24;
      width: 20px;
      text-align: center;
      line-height: 20px;
      height: 20px;
      top: -8px;
      z-index: 10;
    }

    .img_pg {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
      border-radius: 6px;
      overflow: hidden;
    }
  }

  .img_up {
    margin: 5%;
    border-radius: 6px;
    overflow: hidden;
  }
}

.container /deep/ .van-field--min-height .van-field__control {
  min-height: 100px;
}

.container /deep/ .van-checkbox {
  min-height: 30px;
}

.container /deep/ .van-field__label span {
  display: inline-block;
  padding-left: 5px;
  text-align-last: justify;
}

.van-cell::after {
  display: none;
}

.container {
  background-repeat: no-repeat;
  background-size: contain;
  //background: #F2F7FB;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  color: black;

  &-inner {
    padding: 130px 20px 50px;
    overflow: auto;

    .card {
      background: inherit;

      &-container {
        border-radius: 10px;
        overflow: hidden;
        background-color: white;
        padding: 10px;

        &-item {
          margin-bottom: 10px;
        }

        &-item:not(:last-child) {
          border-bottom: 1px solid #ebedf0;
        }
      }

      &-item {
        &-subtitle {
          padding: 0px 5px;
          font-size: 15px;
          margin-bottom: 5px;
        }

        &-label {
          color: #a0a0a0;
          font-size: 14px;
          position: relative;
          padding-left: 20px;
          padding-right: 10px;
        }

        &-label::before {
          position: absolute;
          left: 8px;
          color: #ee0a24;
          font-size: 14px;
          content: '*';
        }
      }

      &-gtjzz {
        display: flex;
        justify-content: space-between;

        &-btn {
          border-radius: 5px;
        }
      }
    }
  }

  .footer {
    padding: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;

    &-content {
      width: 80%;
      display: inline-block;
      text-align: center;

      &>div {
        display: inline-block;
        color: #bbb;
        font-weight: bold;
      }
    }

    &::before,
    &::after {
      content: '';
      width: 10%;
      border-top: 1px #bbb solid;
      display: inline-block;
      vertical-align: middle;
    }
  }

  .bottom-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  .residentlist {
    display: flex;
    justify-content: flex-start;
    flex-flow: wrap;
    align-items: center;
    padding-top: 10px;

    &-item {
      box-sizing: border-box;
      padding: 5px;
      width: 100%;
      text-align: center;
      border: 1px solid #898989;
      border-radius: 10px;
      margin: 10px 0;
      cursor: pointer;

      &-bottom {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;

        &-btn {
          width: 40%;
          border-radius: 5px;
        }
      }

      .desc {
        margin-top: 10px;
        font-weight: 400;
        font-size: 20px;
        text-align: left;
        color: #b4b4b4;
      }

      &-active {
        box-shadow: 0px 0px 5px 3px rgba(255, 145, 0, 0.8);
        border: 1px solid #ff9100;
      }
    }
  }
}

.tag {
  margin-left: 10px;
  padding: 2px 5px;
  width: auto;
  height: auto;
  font-size: 12px;
  border-radius: 3px;
  text-align: center;
  background: rgba(211, 211, 211, 0.5);
  border: 1px solid grey;
  color: grey;
}

.field-title {
  display: inline-block;
  padding-left: 5px;
  text-align-last: justify;
}

.field-text {
  padding: 0 5px;
  font-size: 12px;
}
</style>
